<template>
    <div id="TextBackup" ref="TextBackup" class="TextBackup">
        <div class="textLable">
        <span style="color: rgb(255, 222, 51)">
            <p>
                最迟的备份（小时）: <span style="color: rgb(229, 230, 250)"> {{this.dateSpan_HH}} </span>
            </p>
            <p>
                备份名称: <span style="color: rgb(229, 230, 250)">{{this.backupName}} </span>
            </p>
            <p>
                完成时间: <span style="color: rgb(229, 230, 250)">{{this.endTime}} </span>

                <span style="color: rgb(255, 222, 51); position: relative; left: 60px">
                    耗时: <i style="color: rgb(229, 230, 250)"> {{this.consumingTime}} </i>
                </span>
            </p>
            <p>
                状态: <span style="color: rgb(229, 230, 250)">{{this.status}} </span>
            </p>
            <p>
                备份类型: <span style="color: rgb(229, 230, 250)">{{this.backupType}} </span>
            </p>
            <p>
                存储目标: <span style="color: rgb(229, 230, 250)">{{this.target}} </span>
            </p>
        </span>
        </div>
    </div>
</template>>

<script>
import { fetchData } from '@/api/index.js';
import bus from 'common/bus.js';

export default {
    data() {
        return {
            postData: {
                opera: 'dbBackup',
                curPage: 1,
                pageSize: 20,
                sort: {
                    sortColumn: '',
                    sortOrders: ''
                },
                filtersType: 'fuzzyquery',
                filters: {
                    "monid": "81CCBDA530AA41DA945642E6C9046D6E",
                },
            },
            dateSpan_HH: '',
            backupName: '',
            endTime: '',
            consumingTime: '',
            status: '',
            backupType: '',
            target: '',
            TextBackup: {},
            timerName: 'TextBackup',
            timerEventName: 'timerTextBackup',
            timerInterval: 1000 * 60
        }
    },
    created() {
        this.getData();
        bus.$emit('timerNewTodo', {
            name: this.timerName,
            eventName: this.timerEventName,
            interval: this.timerInterval,
            intervalNow: 0
        });

        bus.$on(this.timerEventName, msg => {
            if (msg.isGetData) {
                this.getData();
            }
        });
    },
    mounted() {
        
    },
    computed: {
        postDataFn() {
            return {
                postData : JSON.stringify(this.postData)
            }
        }
    },
    methods: {
        getData(){
            fetchData(
                this.postDataFn
            ).then((res) => {
                this.dateSpan_HH = res.data[0].DATESPAN_HH;
                this.backupName = res.data[0].BACKUP_NAME;
                this.endTime = res.data[0].END_TIME;
                this.consumingTime = res.data[0].ELAPSED_TIME;
                this.status = res.data[0].STATUS;
                this.backupType = res.data[0].INPUT_TYPE
                this.target = res.data[0].OUTPUT_DEVICE_TYPE
            });
        }
    },
    beforeDestroy() {
        bus.$emit('timerNewTodo', {
            name: this.timerName
        });
    },
    watch:{
        
    }
}
</script>

<style scoped>
.TextBackup{
    /* height: 150px; */
    /* border : 5px solid red */

}
.textLable{
    padding: 10px;
}
</style>